<template>
	<view class="">
		<view class="" style="padding:30rpx 20rpx;">
			<view class="input-con flex-row items-center">
				<u-icon name="search" size="32" color="#999"></u-icon>
				<input class="input fill" focus v-model="inputval" type="text" value="" focus @confirm="search" placeholder="请输入关键字" />
			</view>
		</view>
		<view style="padding: 20rpx;">
			<view class="flex-row items-center justify-between">
				<view class="serch-title">历史记录</view>
				<u-icon name="trash" size="36" color="#A3A3A3" @click="clear"></u-icon>
			</view>
		</view>
		<view class="flex-row items-center" style="flex-wrap: wrap;padding-left: 20rpx;"><view class="item" hover-class="hover-dark" v-for="(item,index) in historyList" :key="index" @click="starSearch(item)">{{item}}</view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			inputval: '',
			historyList:[]
		};
	},
	onLoad() {
		if(uni.getStorageSync('history')){
			this.historyList=uni.getStorageSync('history');
		}
	},
	methods: {
		clear(){
			this.historyList=[];
			uni.removeStorageSync('history');
		},
		search() {
			if(this.inputval==""){
				this.$util.msg('请输入关键字查询!');
				return
			}
			this.starSearch(this.inputval);
		},
		starSearch(val){
			const index=this.historyList.findIndex(item=>item==val);
			console.log(index)
			if(index>=0) this.historyList.splice(index,1);
			if(this.historyList.length>10) this.historyList.pop();
			this.historyList.unshift(val);
			uni.setStorageSync('history',this.historyList);
			this.navTo(`/pages/search/search-list?key=${val}`);
			this.inputval="";
		}
	}
};
</script>
<style>
page {
	background: #ffffff;
}
</style>
<style scoped lang="scss">
.input-con {
	height: 88rpx;
	background: #f6f6f6;
	border-radius: 44rpx;
	padding: 0 30rpx;
}
.input {
	height: 88rpx;
	padding: 0 20rpx;
}
.item {
	font-size: 24rpx;
	font-weight: 500;
	color: #999999;
	padding: 10rpx 30rpx;
	background: #f6f6f6;
	border-radius: 27rpx;
	margin-right: 20rpx;
	margin-bottom:20rpx;
}
</style>
